<template>
  <section>
    <header>
      <!-- <van-row>
        <van-col
          span="24"
          style="
            background-color: #fff;
            display: flex;
            flex-direction: column;
            padding-bottom: 15px;
          "
        >
       
         <van-row style="height:41px;line-height:41px;font-weight:bold;font-size: 16px;">
            <van-col span="20" style="text-align:left;padding-left:6%;">自助服务</van-col>
          </van-row> -->
      <!-- <van-row style="padding-top: 15px; text-align: center">
            <van-col
              span="6"
              @click="$router.push({ path: '/user/order/list/0' })"
            >
              <div>
                <van-icon :name="orderPng" size="45" />
                <br />
                <span style="font-size: 12px; color: #9d9b9b">查看订单</span>
              </div>
            </van-col>
            <van-col
              span="6"
              @click="$router.push({ path: '/user/order/list/2' })"
            >
              <div>
                <van-icon :name="remindPng" size="45" />
                <br />
                <span style="font-size: 12px; color: #9d9b9b">提醒发货</span>
              </div>
            </van-col>
            <van-col
              span="6"
              @click="$router.push({ path: '/user/order/list/3' })"
            >
              <div>
                <van-icon :name="logisticsPng" size="45" />
                <br />
                <span style="font-size: 12px; color: #9d9b9b">物流查询</span>
              </div>
            </van-col>
            <van-col span="6" @click="calService">
              <div>
                <van-icon :name="complainPng" size="45" />
                <br />
                <span style="font-size: 12px; color: #9d9b9b">投诉建议</span>
              </div>
            </van-col>
          </van-row>
        </van-col>
      </van-row> -->
    </header>
    <main>
      <van-row
        style="
          background-color: #fff;
          display: flex;
          font-size: 14px;
          padding: 15px 0 0 0;
          align-items: center;
        "
      >
        <van-col span="8" style="text-align: center"> 专属客服: </van-col>
        <van-col span="16">
          <span
            @click="callKf"
            style="
              border: 1px solid rgba(187, 187, 187, 0.47);
              border-radius: 16px;
              padding: 0 10px;
              display: inline-block;
              height: 30px;
              line-height: 30px;
            "
          >
            <van-icon name="phone" color="#F46916" />&nbsp;
            <font color="#F46916">{{ mobile }}</font>
          </span>
        </van-col>
      </van-row>
      <van-row
        style="
          background-color: #fff;
          display: flex;
          font-size: 14px;
          padding: 15px 0 0 0;
          align-items: center;
        "
      >
        <van-col span="8" style="text-align: center"> 售后客服: </van-col>
        <van-col span="16">
          <span
            @click="calService"
            style="
              border: 1px solid rgba(187, 187, 187, 0.47);
              border-radius: 16px;
              padding: 0 10px;
              display: inline-block;
              height: 30px;
              line-height: 30px;
            "
          >
            <van-icon name="phone" color="#F46916" />&nbsp;
            <font color="#F46916">{{ afterSaleTel }}</font>
          </span>
        </van-col>
      </van-row>
      <van-row
        style="
          background-color: #fff;
          display: flex;
          font-size: 14px;
          padding: 15px 0 0 0;
          align-items: center;
        "
      >
        <van-col span="8" style="text-align: center"> 喷喷涂涂客服: </van-col>
        <van-col span="16">
          <span
            @click="callST"
            style="
              border: 1px solid rgba(187, 187, 187, 0.47);
              border-radius: 16px;
              padding: 0 10px;
              display: inline-block;
              height: 30px;
              line-height: 30px;
            "
          >
            <van-icon name="phone" color="#F46916" />&nbsp;
            <font color="#F46916">{{ sanTuWangTel }}</font>
          </span>
        </van-col>
      </van-row>
      <van-row
        style="
          background-color: #fff;
          display: flex;
          font-size: 14px;
          padding: 15px 0 15px 0;
          align-items: center;
        "
      >
        <van-col span="24" style="text-align: center">
          <span class="description"
            >喷喷涂涂客服 [周一至周六] 08: 00-12: 00 , 13: 00-17:00
          </span>
        </van-col>
      </van-row>
    </main>
    <footer>
      <van-row>
        <van-col
          span="24"
          style="background-color: #fff; display: flex; flex-direction: column"
        >
          <!-- 猜你想问 -->
          <van-row
            style="
              height: 41px;
              line-height: 41px;
              font-weight: bold;
              margin-top: 20px;
              font-size: 16px;
            "
          >
            <van-col span="20" style="text-align: left; padding-left: 6%"
              >猜你想问</van-col
            >
          </van-row>
          <van-row>
            <van-col
              span="24"
              style="
                padding-left: calc(6% - 16px);
                padding-right: calc(6% - 16px);
                font-size: 12px;
              "
            >
              <van-collapse :accordion="true" v-model="activeNames">
                <van-collapse-item
                  :title="issue.question"
                  :name="index"
                  v-for="(issue, index) in issueList"
                  :key="index"
                >
                  {{ issue.answer }}
                </van-collapse-item>
              </van-collapse>
            </van-col>
          </van-row>
        </van-col>
      </van-row>
    </footer>
  </section>
</template>
<script>
import logo_default from '@/assets/images/logo.png';
import inquiry from '@/assets/images/inquiry.png';
import remind from '@/assets/images/remind.png';
import complaints from '@/assets/images/complaints.png';
import logistics from '@/assets/images/logistics.png';

import { Image, Row, Col, Divider, Button, Collapse, CollapseItem } from 'vant';
import { issueList, authInfo } from '@/api/api';

export default {
  name: 'kf-card',
  data() {
    return {
      nickName: '昵称',
      mobile: '',
      tel: '',
      address: '',
      positionName: '',
      userId: '0',
      avatar:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/loecx309uoghxz7yp0hq.png',
      head_bg:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/ebpy0abkyjre8nem0iyb.png',
      logo: logo_default,
      bannerPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/g8cknarsrfsfjobmn3k9.jpg',
      complainPng: complaints,
      orderPng: inquiry,
      remindPng: remind,
      logisticsPng: logistics,
      issueList: [],
      activeNames: [-1],
      afterSaleTel: '',
      sanTuWangTel: '19975086862',
      shouhou: '',
    };
  },
  created() {
    this.getParams();
    this.getIssueList();
  },

  methods: {
    getParams() {
      this.userId = decodeURI(this.$route.query.directorId);
      authInfo({ userId: this.userId }).then((res) => {
        this.mobile = res.data.data.directorPhone || '';
        this.nickName = res.data.data.nickName || '昵称';
        this.tel = res.data.data.tel; // 售后电话
        this.avatar = res.data.data.avatar;
        this.address = res.data.data.address || '';
        this.positionName = res.data.data.positionName || '区域经理';
        this.afterSaleTel =
          res.data.data.afterSale && res.data.data.afterSale.tel
            ? res.data.data.afterSale.tel
            : '17314248188';
      });
    },
    getIssueList() {
      issueList().then((res) => {
        this.issueList = res.data.data.list;
      });
    },
    callKf() {
      window.location.href = 'tel:' + this.mobile;
    },
    calService() {
      if (this.afterSaleTel == null || this.afterSaleTel == '') {
        this.$toast({
          message: '请先前往商城下单',
          duration: 1500,
        });
        return;
      }
      window.location.href = 'tel:' + this.afterSaleTel;
    },
    callST() {
      window.location.href = 'tel:' + this.sanTuWangTel;
    },
    shareKf() {
      this.$router.push({
        path: '/user/card/share',
        name: 'user-card-share',
        query: {
          avatar: this.avatar,
          nickName: this.nickName,
          mobile: this.mobile,
          userId: this.userId,
          address: this.address,
          positionName: this.positionName,
          isManager: this.isManager,
        },
      });
    },
  },
  components: {
    [Image.name]: Image,
    [Row.name]: Row,
    [Col.name]: Col,
    [Divider.name]: Divider,
    [Button.name]: Button,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
  },
};
</script>
<style>
.van-cell__title {
  font-size: 12px;
}

.view-router {
  padding-bottom: 0;
}

.content-kf {
  height: auto;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 10%;
  margin: auto;
  border-radius: 25px;
  background-color: #fff;
  box-shadow: -5px 0px 5px #adadad, /*左边阴影*/ 0px -5px 5px #adadad,
    /*上边阴影*/ 5px 0px 5px #adadad, /*右边阴影*/ 0px 5px 5px #adadad;
}

.trapezoid-kf {
  width: 65%;
  height: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
}

main {
  margin: 10px 0;
}
.description {
  font-size: 12px;
  color: #adadad;
}
</style>
